<template>
	<view class="logo">
		<image src="../../static/home/cat.png"></image>
		<text>宠家</text>
	</view>
	<view class="container">
		<view class="title">欢迎来到宠家平台</view>
		<view class="button-container">
			<view class="input">
				账号:
				<input :value="people_zhanghao" @input="zhanghaochange" :class="['shuru',zhanghao_focu?'active':'']" type="number" @focus="changefocus('zhanghao')" @blur="changeblur('zhanghao')"/>
			</view>
			<view class="input">
				密码:
				<input :value="people_password" @input="passwordchange" :class="['shuru',password_focu?'active':'']" password @focus="changefocus('password')" @blur="changeblur('password')"/>
			</view>
			<button @click="login()" class="login">登录</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import http from "@/utils/request.js"
	if(uni.getStorageSync('peopleinfo')){
		uni.reLaunch({
			url:"/pages/order/index"
		})
	}
	let zhanghao_focu=ref(false)
	let password_focu=ref(false)
	let people_zhanghao=ref('')
	let people_password=ref('')
	function zhanghaochange(e){
		people_zhanghao.value=e.detail.value
	}
	function passwordchange(e){
		people_password.value=e.detail.value
	}
	function login(){
		let response=http.post('/people/login',{
			people_zhanghao:people_zhanghao.value,
			people_password:people_password.value
		})
		response.then(res=>{
			if(res.data.code===200){
				uni.setStorageSync('peopleinfo',res.data.data)
				uni.reLaunch({
					url:"/pages/order/index"
				})
			}else if(res.data.code===400){
				uni.showToast({
					title:'账号或密码错误',
					icon:'none'
				})
			}
		})
	}
	function changefocus(e){
		if(e==='zhanghao')zhanghao_focu.value=true
		else password_focu.value=true
		console.log(zhanghao_focu.value)
	}
	function changeblur(e){
		if(e==='zhanghao')zhanghao_focu.value=false
		else password_focu.value=false
	}
</script>

<style lang="scss">
	.container{
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.logo{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top:120rpx;
		
		image{
			width: 150rpx;
			height: 150rpx;
			margin-bottom: 20rpx;
		}
		
		text{
			font-size: 32rpx;
		}
	}
	
	.title{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 60rpx;
	}
	.button-container{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
		.login{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			margin: 30rpx 0;
		}
		
		.input{
			width: 80%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.shuru{
				width: 80%;
				margin-left: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				height: 80rpx;
				background-color: #fff;
				
				&.active{
					border: 2rpx solid #f8e177;
				}
			}
		}
		
	}
	.xieyi{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		color:#666;
	}
</style>
